<template>
	<view class="abo">
	<!-- 	{{bac == "trans"}}
		{{bac}} -->
		
		<view class="gredBac" v-if="bac == 'black'">
			<view>{{name}}</view>
			<image src="../static/back-hei.png" class="back" @click="goBack"></image>
		</view>
		<view class="trans" v-else-if="bac == 'trans'">
			<view>{{name}}</view>
			<image src="../static/back-white.png" class="back" @click="goBack"></image>
		</view>
		<view class="redbac" v-else-if="bac == 'redbac'">
			<view>{{name}}</view>
			<image src="../static/back-white.png" class="back" @click="goBack"></image>
		</view>
		
		<view class="redBtn" v-else>
			<view>{{name}}</view>
			<image src="../static/back-white.png" class="back" @click="goBack" v-if="nextFlag == 'true'"></image>
		</view>
	</view>
	
</template>

<script>
	export default {
		props:["name","nextFlag","rightText","bac"],
		methods: {
			goBack(){
				uni.navigateBack()
			}
		}
	};
</script>

<style>
	.back{
		width: 40upx;
		height: 40upx;
		position: absolute;
		left: 20upx;
	}
	.abo{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88upx;
		display: flex;
		align-items: center;
		  
			font-size: 34upx;
			justify-content: center;
			z-index: 1000;
	}
	.abo>view{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 88upx;
	}
	.redBtn{
		background: linear-gradient(131deg, rgba(210, 0, 0, 1), rgba(253, 104, 47, 1));
	}
	.redBtn view{
		color: #ffffff;
	}
	.redbac{
		background-color: #EB3F1B;
	}
	.redbac view{
		color: #ffffff;
	}
	.abo view{
		color: #ffffff;
	}
	.gredBac{
		
	}
	.gredBac{
		background: #FFFFFF;
		color: #333333;
	}
	.gredBac view{
		color: #333333;
	}
	.trans{
		
	}
	.trans view{
			color: #ffffff;
	}
</style>
